<?php
    if (!isset($area_province)) $area_province="";
    if (!isset($area_city)) $area_city="";

?>
<div class="row">
    <div class="col-xs-6">
        <select name="[province-name]" id="area-province" class="chosen-select form-control"
                onchange="changeProvince()"></select>
    </div>

    <div class="col-xs-6" id="area-city-container" >
        <!--<select name="[city-name]" id="area-city" class="form-control" onchange="changeCity()"></select>-->
        <select name="[city-name]" id="area-city" class="form-control" ></select>
        <!--只有省市两级-->
    </div>

</div>

<script src="__PUBLIC__/vendors/select2/js/select2.min.js"></script>
<script type="application/javascript">
    //省份选择器
    var provinceSelector = $("#area-province");
    //城市选择器
    var citySelector = $("#area-city");
    var cityContainer = $("#area-city-container");

    
    //更改省份
    function changeProvince()
    {

        
        if (provinceSelector.val() != '')
        {

            $.ajax({
                url: "{:url('Utils/queryRegion')}",
                type: 'POST', //GET
                async: true,    //或false,是否异步
                data: {
                    parent_id: provinceSelector.val()
                },
                timeout: 5000,    //超时时间
                dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
                success: function (data, textStatus, jqXHR) {

                    //显示市区选择器
                    cityContainer.show();

                    citySelector.empty();

                    citySelector.append("<option selected value=''>" + "请选择" + "</option>");

                    for (var i = 0; i < data.length; i++) {
                        if (data[i].id == "{$area_city}") {
                            citySelector.append("<option selected value='" + data[i].id + "'>" + data[i].title + "</option>");
                        } else {
                            citySelector.append("<option value='" + data[i].id + "'>" + data[i].title + "</option>");
                        }
                    }
                    if (citySelector.val() != "") {
                        //changeCity();
                    }
                },
                error: function (xhr, textStatus) 
                {
                },
                complete: function () 
                {
                }
            })
        }
        else
        {    citySelector.empty();

        }
    }

    $(document).ready(function () {

        $.ajax({
            url: "{:url('Utils/queryRegion')}",
            type: 'POST', //GET
            async: true,    //或false,是否异步
            data: {
                parent_id: '1'
            },
            timeout: 5000,    //超时时间
            dataType: 'json',
            success: function (data, textStatus, jqXHR) {

                provinceSelector.empty();
                provinceSelector.append("<option selected value=''>" + "请选择" + "</option>");
                for (var i = 0; i < data.length; i++) {
                    if (data[i].id == "{$area_province}") {
                        provinceSelector.append("<option selected value='" + data[i].id + "'>" + data[i].title + "</option>");
                    } else {
                        provinceSelector.append("<option value='" + data[i].id + "'>" + data[i].title + "</option>");
                    }

                }
                if (provinceSelector.val() != "") {
                    changeProvince();
                }
            }
        });
    });

    $(function () {
        $("#area-province").select2({
            placeholder: "请选择省份",
            allowClear: true,
            width: "100%"
        });

        $("#area-city").select2({
            placeholder: "请选择城市",
            allowClear: true,
            width: "100%"
        });


    });
</script>